import { Component } from 'react';
import styles from './index.module.scss';
import { isMobile } from 'react-device-detect';
class Backend extends Component {
  state = {
    personalInfo: {
      name: 'Black',
      position: '后端工程师',
      birth: '2000 年 1 月 9 日',
      political: '中共党员',
      phone: '+86 18431254800',
      email: '2315404869@qq.com',
      website: 'https://www.huangtianyu.website',
      csdn: 'https://blog.csdn.net/Bl_a_ck'
    },
    // 教育背景
    education: [
      {
        period: '2019.09 - 2023.06',
        school: '北京建筑大学',
        college: '智能科学与技术学院',
        major: '计算机科学与技术',
        degree: '本科（联培）'
      },
      {
        period: '2023.09 - 2026.06',
        school: '北京建筑大学',
        college: '智能科学与技术学院',
        major: '计算机科学与技术',
        degree: '学术型硕士'
      }
    ],

  };

  render() {
    const { personalInfo, education } = this.state;

    return (
      <div className={styles.resumeContainer}>
        <div className={styles.resume}>
          {/* 个人信息 */}
          {isMobile ? (
          <section className={styles.section}>
            <div className={styles.personalRowMobile}>
              <div style={{display: 'flex', flexDirection: 'row', alignItems: 'center', gap: '20px'}}>
                {/* 个人头像 */}
                <div>
                  <div className={styles.personalImage}>
                    <img src={require('@/assets/images/me_backend.jpg')} alt="个人头像" />
                  </div>
                  <div className={styles.personalName}>
                    <h1 style={{fontSize: '24px'}}>{personalInfo.name}</h1>
                  </div>
                </div>
                {/* 信息主体 */}
                <div className={styles.personalInfo}>
                  <div className={styles.infoGrid}>
                    <div>🎂 出生年月：{personalInfo.birth}</div>
                    <div>📍 政治面貌：{personalInfo.political}</div>
                    <div>📞 联系电话：{personalInfo.phone}</div>
                    <div>📧 邮箱：{personalInfo.email}</div>
                    <div>🌐 个人网站： <a href={personalInfo.website} target="_blank" rel="noopener noreferrer">Black的个人空间</a></div>
                    <div>📝 CSDN：<a href={personalInfo.csdn} target="_blank" rel="noopener noreferrer">Black的技术博客</a></div>
                  </div>
                </div>
              </div> 
              {/* 意向岗位 */}
              <div style={{width: '100%', textAlign: 'right'}} className={styles.personalInfo}>
                <h3>{personalInfo.position}</h3>
              </div>
            </div>
          </section>
          ) : (
          <section className={styles.section}>
            <div className={styles.personalRow}>
              {/* 个人头像 */}
              <div className={styles.personalImage}>
                <img src={require('@/assets/images/me_backend.jpg')} alt="个人头像" />
              </div>
              {/* 信息主体 */}
              <div className={styles.personalInfo}>
                <div className={styles.personalName}>
                  <h1>{personalInfo.name}</h1>
                  <h2>意向岗位：{personalInfo.position}</h2>
                </div>
                <div className={styles.infoGrid}>
                  <div>🎂 出生年月：{personalInfo.birth}</div>
                  <div>📍 政治面貌：{personalInfo.political}</div>
                  <div>📞 联系电话：{personalInfo.phone}</div>
                  <div>📧 邮箱：{personalInfo.email}</div>
                  <div>🌐 个人网站： <a href={personalInfo.website} target="_blank" rel="noopener noreferrer">Black的个人空间</a></div>
                  <div>📝 CSDN：<a href={personalInfo.csdn} target="_blank" rel="noopener noreferrer">Black的技术博客</a></div>
                </div>
              </div>
            </div>
          </section>
          )}
          
          {/* 教育背景 */}
          <h2 className={styles.sectionTitle}>
            <span className={styles.icon}>🎓</span>
            <span className={styles.title}>教育背景</span> 
          </h2>
          <section className={styles.section}>
            {education.map((edu, index) => (
              <div key={index}>
                <div className={styles.eduRow}>
                  <span className={styles.eduPeriod}>{edu.period}</span>
                  <span className={styles.eduSchool}>{edu.school}</span>
                  <span className={styles.eduCollege}>{edu.college}/{edu.major}  |  {edu.degree}</span>
                </div>
                <div className={styles.eduCourses}>
                  {index === 0 ? 
                    '主修课程：C语言程序设计、数据结构、计算机组成、操作系统、计算机网络、数据库系统原理、算法设计与分析、软件工程、Java程序设计、C++与C#程序设计、Unix系统、Android平台开发技术、编译技术' :
                    '研究方向：计算机视觉与图像处理 - 语义分割技术 - 医学影像处理；指导老师：赵光哲（教授、博士生导师）'
                  }
                </div>
              </div>
            ))}
          </section>

          {/* 学术成果 */}
          <h2 className={styles.sectionTitle}>
            <span className={styles.icon}>📚</span>
            <span className={styles.title}>学术成果</span>
          </h2>
          <section className={styles.section}>
            <div className={styles.academicItem}>
              <strong>学术论文：</strong>
              the paper <i>VM-UNet++: Vision Mamba UNet with Multi-Scale Feature Fusion for Medical Image Segmentation</i> has been accepted to the 21st International Symposium on Bioinformatics Research and Applications (ISBRA 2025)
            </div>
            <div className={styles.academicItem}>
              <strong>授权专利：</strong>
              <ul>
                <li>《一种微电网集群系统自适应鲁棒协同控制方法及系统》—— 专利号 ZL 2024 1 0096044.2</li>
                <li>《一种微电网集群系统分布式协同控制及重切换系统》—— 专利号 ZL 2024 1 0093349.8</li>
              </ul>
            </div>
            <div className={styles.academicItem}>
              <strong>参编专著：</strong>
              《智能推理理论与技术》
            </div>
          </section>

          {/* 个人技能 */}
          <h2 className={styles.sectionTitle}>
            <div className={styles.icon}>💪</div>
            <div className={styles.title}>个人技能</div> 
          </h2>
          <section className={styles.section}>
            <div className={styles.skills}>
              <div className={styles.skillTitle}>B/S 架构开发</div>
              <div className={styles.skillDesc}>
              熟练掌握Python、JavaScript、TypeScript语言，掌握SpringBoot、Django、Express后端开发架构，了解TCP/IP协议族的通信原理；熟练使用Cursor、Copilot、Deepseek等AI生产力工具。
              </div>
              <div className={styles.skillTitle}>低延时通讯开发</div>
              <div className={styles.skillDesc}>
              熟悉C++语言，能够独立实现Websocket、WebRTC等低延时通信技术，了解流媒体编解码原理和推拉流过程，具备搭建流媒体服务端的能力。
              </div>
            </div>
          </section>
        </div>
      </div>
    );
  }
}

export default Backend;